<!-- eslint-disable no-console -->
<script>
	export default { name: 'ScreenAdapter' }
</script>

<script setup>
import { onMounted, ref } from 'vue';
const props = defineProps({
	width: {
	  type: String,
	  default: "1920",
	},
	height: {
	  type: String,
	  default: "1080",
	}
})

var style = ref({
		width: props.width + "px",
		height: props.height + "px",
		transform: "scale(1) translate(-50%, -50%)",
	})
	
function Debounce(fn, t) {
	const delay = t || 500;
	let timer;
	return function () {
	  const args = arguments;
	  if (timer) {
	    clearTimeout(timer);
	  }
	  const context = this;
	  timer = setTimeout(() => {
	    timer = null;
	    fn.apply(context, args);
	  }, delay);
	};
}

function getScale() {
	const w = window.innerWidth / props.width;
	const h = window.innerHeight / props.height;
	return w < h ? w : h;
}

function setScale() {
	style.value.transform =
	  "scale(" + getScale() + ") translate(-50%, -50%)";
}

onMounted(() => {
	setScale();
	window.onresize = Debounce(setScale, 1000);
})

</script>

<template>
  <div class="ScreenAdapter" :style="style">
    <slot />
  </div>
</template>


<style lang="scss" scoped>
.ScreenAdapter {
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: 0.3s;
  overflow: hidden;
  //background: red;
}
</style>